<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>register namespace</title>
		<link rel="stylesheet" href="../../libs/layui/css/layui.css">
		<link rel="stylesheet" href="../../public/global.css">
	</head>

	<body>
		<form class="layui-form layui-row layui-col-space8">
			<div class="layui-col-md2">
				<div class="layui-input-wrap">
					<div class="layui-input-prefix">
						<i class="layui-icon layui-icon-windows"></i>
					</div>
					<input type="text" name="namespace" placeholder="空间名称" lay-affix="clear" class="layui-input">
				</div>
			</div>

			<div class="layui-col-md2">
				<div class="layui-input-wrap">
					<div class="layui-input-prefix">
						<i class="layui-icon layui-icon-username"></i>
					</div>
					<input type="text" name="creator" placeholder="创建人员" lay-affix="clear" class="layui-input">
				</div>
			</div>

			<div class="layui-col-md2">
				<div class="layui-btn-container layui-col-xs12">
					<button class="layui-btn" lay-submit lay-filter="namespace-table-search-btn">搜索</button>
					<button type="reset" class="layui-btn layui-btn-primary">清除</button>
				</div>
			</div>
		</form>

		<table class="layui-hide" id="namespace-table" lay-filter="namespace-table"></table>

		<!-- <script type="text/html" id="namespace-table-toolbar">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-addition"></i>新增</button>
			</div>
		</script> -->
		<script type="text/html" id="namespace-table-toolbar">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-addition"></i></button>
				<button class="layui-btn layui-btn-sm layui-bg-red" lay-event="delete"><i
					 class="layui-icon layui-icon-delete"></i></button>
			</div>
		</script>


		<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
		<script src="../../libs/layui/layui.js"></script>
		<script>
			layui.use(function() {
				let $ = layui.jquery;
				let form = layui.form;
				let table = layui.table;
				let laydate = layui.laydate;

				// 创建表格实例
				table.render({
					id: 'namespace-table',
					elem: '#namespace-table', // 数据表格ID
					page: true, // 开启分页
					// skin: "line",
					toolbar: '#namespace-table-toolbar', // 指定table工具栏
					defaultToolbar: ['filter', 'exports', 'print'], // table工具栏中在默认工具栏（左侧）
					css: [
						'.layui-table-view td[data-edit]{color: #16B777;}' // 对开启了编辑的单元格追加样式
					].join(''),
					cols: [
						[{
							type: 'checkbox', // 选择框
							fixed: 'left' // 固定在左侧
						}, {
							field: 'sn',
							title: '设备序列号',
							sort: true
						}, {
							field: 'addr',
							title: '设备地址',
							sort: true
						}, {
							field: 'type',
							title: '设备类型',
							sort: true
						}, {
							field: 'model',
							title: '设备型号',
							sort: true
						}, {
							field: 'status',
							title: '设备状态',
							sort: true
						}, {
							field: 'scanned_at',
							title: '巡检时间',
							sort: true
						}, {
							field: 'version',
							title: '应用版本',
						}, {
							field: 'onwer',
							title: '所有者',
						}, {
							field: 'holder',
							title: '使用者',
						}]
					],
					initSort: { // 默认排序
						type: 'desc', // 降序排序					
						field: 'created_at', // 按创建时间排序
					},

					// 请求数据
					url: '/registry/namespaces?is_desc=1',
					method: "get",
					headers: {
						"X-User-Id": "wenxian@cictci.com",
						"X-User-Token": "1111111111111",
					},

					// 解析响应
					parseData: function(res) {
						return {
							"code": res.code, // 解析接口状态
							"msg": res.desc, // 解析提示文本
							"count": res.data.total, // 解析数据长度
							"data": res.data.items // 解析数据列表
						};
					},

					// 置空查询参数
					done: function() {
						this.where = {} //本次加载完成直接置空where搜素条件!!!!!!!
					}
				});

				// 单元格编辑事件
				table.on('edit(namespace-table)', function(obj) {
					let field = obj.field; // 得到字段
					let value = obj.value; // 得到修改后的值
					let data = obj.data; // 得到所在行所有键值

					// 校验更新字段
					let reqBody = {};
					if (field === 'desc') {
						reqBody = {
							"desc": value
						}
					} else {
						layer.msg('【注册中心】不支持更新命名空间字段：' + field, {
							icon: 2
						});
						return
					}

					// 更新
					$.ajax({
						url: `/registry/namespaces?namespace=${data.namespace}`,
						method: "put",
						contentType: "application/json",
						headers: {
							"X-User-Token": "1111111111111",
						},
						data: JSON.stringify(reqBody),
						success: function(resp) {
							// resp = JSON.parse(resp);
							if (resp.code != "00000") {
								layer.msg('【注册中心】更新命名空间失败：' + resp.desc, {
									icon: 2
								});
								return obj.reedit();
							}

							layer.msg('【注册中心】更新命名空间成功', {
								icon: 1
							});
						},
						error: function(resp) {
							if (resp.responseJSON === undefined || resp.responseJSON === null) {
								layer.msg(`【注册中心】更新命名空间失败：${resp.statusText}`, {
									icon: 2
								});
							} else {
								layer.msg(`【注册中心】更新命名空间失败：${resp.responseJSON.desc}`, {
									icon: 2
								});
							}
							return obj.reedit();
						}
					});

					// 其他更新操作
					let update = {};
					update[field] = value;
					obj.update(update);
				});

				table.on('sort(namespace-table)', function(obj) {
					table.reload('namespace-table', {
						initSort: obj,
						where: {
							sortfield: obj.field,
							sorttype: obj.type
						}
					});
				});

				table.on('toolbar(namespace-table)', function(obj) {
					// 新增命名空间
					if (obj.event == "add") {
						addLayer = layer.open({
							type: 1, // page 层类型
							area: ['500px', '230px'],
							title: '【注册中心】新增命名空间',
							shade: 0.6, // 遮罩透明度
							hideOnClose: true,
							shadeClose: true, // 点击遮罩区域，关闭弹层
							maxmin: true, // 允许全屏最小化
							anim: 0, // 0-6 的动画形式，-1 不开启
							content: `
							<div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
								<div class="namespace-add-container">
									<div class="layui-form-item">
										<div class="layui-input-wrap">
											<div class="layui-input-prefix"><i class="layui-icon layui-icon-windows"></i></div>
											<input type="text" name="namespace" value="" lay-verify="required" placeholder="命名空间" lay-reqtext="请填写命名空间" autocomplete="off" class="layui-input" lay-affix="clear">
										</div>
									</div>
									<div class="layui-form-item">
										<div class="layui-input-wrap">
											<div class="layui-input-prefix"><i class="layui-icon layui-icon-reply-fill"></i></div>
											<input type="text" name="desc" value="" placeholder="空间描述" autocomplete="off" class="layui-input">
										</div>
									</div>
									<div class="layui-form-item">
										<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="namespace-add-btn">创建</button>
									</div>
								</div>
							</div>`,
							skin: 'layui-layer-molv',
							success: function() { // 对弹层中的表单进行初始化渲染
								form.render();
								form.on('submit(namespace-add-btn)', function(data) {
									let field = data.field;
									$.ajax({
										url: "/registry/namespaces",
										method: "post",
										contentType: "application/json",
										headers: {
											"X-User-Id": "wenxian@cictci.com",
											"X-User-Token": "1111111111111",
										},
										data: JSON.stringify(field),
										success: function(resp) {
											// resp = JSON.parse(resp);
											if (resp.code != "00000") {
												layer.msg(
													`【注册中心】新增命名空间失败：${resp.desc}`, {
														icon: 2
													});
												return
											}

											layer.close(addLayer);
											layer.msg('【注册中心】新增命名空间成功', {
												icon: 1
											});

											// 新增成功后，刷新当前页面
											let limit = obj.config.page.limit;
											table.reloadData('namespace-table', {
												where: {
													page: 1,
													limit: limit,
												},
											});
										},
										error: function(resp) {
											if (resp.responseJSON ===
												undefined || resp
												.responseJSON === null) {
												layer.msg(
													`【注册中心】新增命名空间失败：${resp.statusText}`, {
														icon: 2
													});
											} else {
												layer.msg(
													`【注册中心】新增命名空间失败：${resp.responseJSON.desc}`, {
														icon: 2
													});
											}
										}
									});
									return false; // 阻止默认 form 跳转
								});
							}
						});
					} else if (obj.event == "delete") {
						// 提取要删除的日志包名
						let id = obj.config.id;
						let status = table.checkStatus(id);
						let data = status.data;
						// 检查是否有删除列表是否为空
						if (data.length == 0) {
							layer.msg('【注册中心】请选择命名空间！', {
								icon: 2
							});
							return
						} else if (data.length > 1) {
							layer.msg('【注册中心】只能删除单个命名空间！', {
								icon: 2
							});
							return
						}

						// 触发删除确认弹窗
						let namespace = data[0].namespace
						layer.confirm(`【注册中心】确认删除命名空间：${namespace}`, {
							title: "【注册中心】删除命名空间",
							btn: ['确定', '取消'], // 按钮
							skin: 'layui-layer-molv' // 样式类名
						}, function() {
							$.ajax({
								url: `/registry/namespaces?namespace=${namespace}`,
								method: "delete",
								success: function(resp) {
									if (resp.code != "00000") {
										layer.msg(
											`【注册中心】删除命名空间失败：${resp.desc}`, {
												icon: 2
											});
										return
									}

									layer.msg('【注册中心】删除命名空间成功', {
										icon: 1
									});

									// 新增成功后，刷新当前页面
									let limit = obj.config.page.limit;
									table.reloadData('namespace-table', {
										where: {
											page: 1,
											limit: limit,
										},
									});
								},
								error: function(resp) {
									if (resp.responseJSON === undefined || resp
										.responseJSON === null) {
										layer.msg(`【注册中心】删除命名空间失败：${resp.statusText}`, {
											icon: 2
										});
									} else {
										layer.msg(
											`【注册中心】删除命名空间失败：${resp.responseJSON.desc}`, {
												icon: 2
											});
									}
								}
							});
						});
					}
				});

				// 搜索提交
				form.on('submit(namespace-table-search-btn)', function(data) {
					let field = data.field; // 获得表单字段

					// 执行搜索重载数据
					table.reload('namespace-table', {
						// skin: "line",
						page: {
							curr: 1 // 重新从第 1 页开始
						},

						// 发起请求
						url: `/registry/namespaces?is_desc=1&namespace=${field.namespace}&creator=${field.creator}`,
						method: "get",
						headers: {
							"X-User-Token": "1111111111111",
						},
						where: {
							// namespace: field.namespace,
							// creator: field.creator,
						},

						// 解析响应
						parseData: function(res) {
							return {
								"code": res.code, // 解析接口状态
								"msg": res.desc, // 解析提示文本
								"count": res.data.total, // 解析数据长度
								"data": res.data.items // 解析数据列表
							};
						},
					});
					return false; // 阻止默认 form 跳转
				});
			});
		</script>
	</body>
</html>